<template>
  <div>
    <div class="title">供应商档案</div>
    <!--基本信息-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-form ref="proForm" :model="provider" :rules="rules" class="demo-table-expand" inline label-position="left"
               label-width="120px">
        <el-form-item label="供应商编码">
          <el-input disabled placeholder="保存后自动生成"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称" prop="name">
          <el-input v-model="provider.name"></el-input>
        </el-form-item>
        <el-form-item label="供应商类别">
          <el-cascader v-model="provider.categoryCode" :props="props">
          </el-cascader>
        </el-form-item>
        <el-form-item label="供应商等级">
          <el-select v-model="provider.level" placeholder="请选择">
            <el-option v-for="item in levels" :key="item.id" :label="item.dictname" :value="item.dictname">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属行业">
          <el-select v-model="provider.industry" placeholder="请选择">
            <el-option v-for="item in industrys" :key="item.id" :label="item.dictname" :value="item.dictname">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="联系人" prop="contact">
          <el-input v-model="provider.contact"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="tel">
          <el-input v-model="provider.tel"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="provider.mobile"></el-input>
        </el-form-item>
        <el-form-item label="email">
          <el-input v-model="provider.email"></el-input>
        </el-form-item>
        <el-form-item label="法人">
          <el-input v-model="provider.boss"></el-input>
        </el-form-item>
        <el-form-item label="注册资本(万元)">
          <el-input-number v-model="provider.registeredCapital"></el-input-number>
        </el-form-item>
        <el-form-item label="员工规模(人)">
          <el-input-number v-model="provider.staffsize"></el-input-number>
        </el-form-item>
        <el-form-item label="公司简介" style="width: 100%;height: 100%;">
          <el-input v-model="provider.content" :cols="150" :rows="6" type="textarea"></el-input>
        </el-form-item>

      </el-form>
    </el-card>

    <!--银行信息-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>财务信息</span>
      </div>
      <el-form class="demo-table-expand" inline label-position="left" label-width="120px">
        <el-form-item label="开户银行">
          <el-input v-model="provider.bank"></el-input>
        </el-form-item>
        <el-form-item label="账户名称">
          <el-input v-model="provider.bankname"></el-input>
        </el-form-item>
        <el-form-item label="银行账号">
          <el-input v-model="provider.bankAccount"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号">
          <el-input v-model="provider.taxpayerId"></el-input>
        </el-form-item>

      </el-form>
    </el-card>
    <div class="btn">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="info" @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import dict from '@/api/sys/dict'
import session from '@/utils/session'

export default {

  data() {
    return {
      provider: {
        name: "",
        categoryCode: "",
        categoryName: "",
        level: "",
        province: "",
        city: "",
        address: "",
        industry: "",
        contact: "",
        tel: "",
        mobile: "",
        email: "",
        boss: "",
        registeredCapital: 0,
        staffsize: 0,
        content: "",
        taxpayerId: "",
        rate: 0,
        bank: "",
        bankname: "",
        bankAccount: "",
        euid: "",
        createUser: ""
      },
      levels: [], //供应商等级
      industrys: [], //所属行业
      rules: {
        name: [{
          required: true,
          message: '请输入供应商名称',
          trigger: 'blur'
        }],
        contact: [
          {
            required: true,
            message: '请输入联系人名称',
            trigger: 'blur'
          }
        ],
        tel: [{
          required: true,
          message: '请输入联系电话',
          trigger: 'blur'
        }],
        mobile: [{
          required: true,
          Pattern: /^1[3456789]\d{9}$/,
          message: '请输入合法手机号',
          trigger: 'blur'
        }]
      },
      //供应商类别配置对象
      props: {
        lazy: true,
        label: "dictname",
        value: "dictcode",
        expandTrigger: 'hover',
        // leaf: "isLeaf",
        emitPath: false,
        lazyLoad(node, resolve) {
          let id = "";
          if (node.data) {
            id = node.data.id;
          }
          let user = session.getUser();
          let params = {
            "parentid": id || '',
            "groupcode": "101",
            "euid": user.euid
          };
          dict.queryDictChildren(params)
            .then(res => {
              if (res.code === 200) {
                resolve(res.data);
              }
            })
        }
      }
    }
  },
  created() {
    this.queryLevel();
    this.queryIndustry();
    let data = this.$route.params;
    if (data.id) {
      //说明是修改
      this.provider = data;
    } else {
      //说明是新增
      let user = this.$session.getUser();
      this.provider = {
        name: "",
        categoryCode: "",
        categoryName: "",
        level: "",
        province: "",
        city: "",
        address: "",
        industry: "",
        contact: "",
        tel: "",
        mobile: "",
        email: "",
        boss: "",
        registeredCapital: 0,
        staffsize: 0,
        content: "",
        taxpayerId: "",
        rate: 0,
        bank: "",
        bankname: "",
        bankAccount: "",
        euid: user.euid,
        createUser: user.name
      };

    }


  },
  methods: {
    queryLevel() {
      let param = {
        "groupname": "供应商等级",
        "euid": session.getUser().euid
      };
      this.$api.queryDictChildren(param)
        .then(res => {
          if (res.code === 200) {
            this.levels = res.data;
          }
        })
    },
    queryIndustry() {
      let param = {
        "groupname": "所属行业",
        "euid": session.getUser().euid
      };
      this.$api.queryDictChildren(param)
        .then(res => {
          if (res.code === 200) {
            this.industrys = res.data;
          }
        })
    },
    back() {
      this.$router.push({name: "provider"})
    },
    save() {
      this.$refs.proForm.validate(valid => {
        if (!valid)
          return;
        this.$api.saveProvider(this.provider)
          .then(res => {
            if (res.code === 200) {
              this.$message({
                message: '保存成功',
                type: 'success'
              });
              this.back()
            }
          })
      });

    }
  }
}
</script>

<style scoped>
.title {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.33%;
  height: 60px;
  line-height: 60px;
}


.btn {
  margin: 50px auto;
  text-align: center;
}

.btn button {
  margin-right: 50px;
}
</style>
